<template>
  <div
    class="land-detail-info"
    v-if="isShow"
    @click.prevent.stop
  >
    <span
      style="
        position: absolute;
        right: 10px;
        top: 7px;
        z-index: 11;
        color: #ddd;
        cursor: pointer;
      "
      @click="closePopup"
      >x</span
    >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        :label="tab"
        :name="tab"
        v-for="tab in tabs"
        :key="tab"
      >
        <div v-if="tab === '选地管理'">
          <div class="item">
            <div class="label">用地代码:</div>
            <div class="desc">{{ kgsj['用地代码'] }}</div>
          </div>
          <div class="item">
            <div class="label">用地大类:</div>
            <div class="desc">{{ kgsj['用地大类'] }}</div>
          </div>
          <div class="item">
            <div class="label">用地性质:</div>
            <div class="desc">{{ kgsj['用地性质'] }}</div>
          </div>
          <div class="item">
            <div class="label">容积率:</div>
            <div class="desc">{{ kgsj['容积率'] }}</div>
          </div>
          <div class="item">
            <div class="label">用地面积（平方米）:</div>
            <div class="desc">
              {{ kgsj['地块面积（平方米）'] }}
            </div>
          </div>
          <div class="item">
            <div class="label">建筑限高:</div>
            <div class="desc">{{ kgsj['建筑限高'] }}</div>
          </div>
        </div>
        <div v-if="tab === '堪界资料'">
          <div class="item">
            <div class="label">区（市）县:</div>
            <div class="desc">{{ kjzl['qsx'] }}</div>
          </div>
          <div class="item">
            <div class="label">批次名称:</div>
            <div class="desc">{{ kjzl['pcmc'] }}</div>
          </div>
          <div class="item">
            <div class="label">项目名称:</div>
            <div class="desc">{{ kjzl['xmmc'] }}</div>
          </div>
          <div class="item">
            <div class="label">项目地址:</div>
            <div class="desc">{{ kjzl['xmdz'] }}</div>
          </div>
          <div class="item">
            <div class="label">状态:</div>
            <div class="desc">{{ kjzl['status'] }}</div>
          </div>
          <!-- <router-link
            :to="{
              path: '/wisdomLand/SiteReportManagement/kanjieData/formPage',
              query: {
                pkid: kjzl['id'],
                defaultIndex: 1,
                type: 'detail'
              }
            }"
            >查看详情</router-link
          > -->
          <el-button
            type="text"
            @click="handleShowDetail(kjzl['id'], 'bz')"
            >查看详情</el-button
          >
        </div>
        <div v-if="tab === '拆迁管护'">
          <div class="item">
            <div class="label">项目名称:</div>
            <div class="desc">{{ cqgh['xmmc'] }}</div>
          </div>
          <div class="item">
            <div class="label">街道:</div>
            <div class="desc">{{ cqgh['jd'] }}</div>
          </div>
          <div class="item">
            <div class="label">面积:</div>
            <div class="desc">{{ cqgh['mj'] || 0 }}</div>
          </div>
          <!-- <router-link
            :to="{
              path: '/wisdomLand/ManagementDataManagement/add',
              query: {
                pkid: cqgh['id'],
                title: '查看',
                isEdit: true,
                isDetail: true
              }
            }"
            >查看详情</router-link
          > -->
          <el-button
            type="text"
            @click="handleShowDetail(cqgh['id'], 'cq')"
            >查看详情</el-button
          >
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import {
  computed,
  ref,
  watch,
  onMounted,
  onUnmounted
} from 'vue'
const emit = defineEmits(['close', 'detail'])

const props = defineProps({
  // 拆迁管护详情
  cqgh: {
    type: Object,
    default: () => null
  },
  // 堪界资料
  kjzl: {
    type: Object,
    default: () => null
  },
  // 控规数据
  kgsj: {
    type: Object,
    default: () => null
  }
})
const tabs = computed(() => {
  const res = []
  if (props.kgsj) {
    res.push('选地管理')
  }
  if (props.kjzl) {
    res.push('堪界资料')
  }
  if (props.cqgh) {
    res.push('拆迁管护')
  }
  return res
})
const activeName = ref('选地管理')
watch(
  () => tabs.value,
  (val) => {
    isShow.value = val.length > 0
    val[0] && (activeName.value = val[0])
  }
)
const isShow = ref(false)
const handleClick = (tab) => {
  activeName.value = tab.name
}
const closePopup = (e) => {
  if (e && e.target && e.target.nodeName === 'CANVAS') {
  } else {
    emit('close')
  }
}
const handleShowDetail = (id, type) => {
  console.log('==', id, type)
  emit('detail', id, type)
}
onMounted(() => {
  document.addEventListener('click', closePopup)
})
onUnmounted(() => {
  document.removeEventListener('click', closePopup)
})
</script>
<style lang="scss" scoped>
.land-detail-info {
  background: #fff;
  width: 300px;
  border-radius: 5px;
  ::v-deep .el-tabs__header {
    padding: 0 10px;
    background: linear-gradient(165deg, #385b73, #324755);
    .el-tabs__item {
      color: #fff;
    }
    .el-tabs__nav-wrap::after {
      display: none;
    }
    color: #fff;
  }
  ::v-deep .el-tabs__content {
    padding: 0 10px 10px 10px;
  }
  .item {
    display: flex;
    margin-bottom: 5px;
    .label {
      margin-right: 10px;
    }
    .desc {
      color: #4c565c;
    }
  }
}
</style>
